<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0px;
			margin: 0px;
		}
		#btn{
			width:80px;
			height: 30px;
			border: none;
			background: coral;
			color: white;
			text-align: center;
		}
		#btn:hover{
			background: #f90;
		}
		.alert{
			display: none;
			position: fixed;
			left: 0px;
			top:0px;
			z-index: 1;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			animation: move 1s;
		}
		.container{
			width:80%;
			margin: 15% auto;
			box-shadow: 10px 10px 10px rgba(0,0,0,0.2)
		}
		.header{
			background: coral;
			padding: 15px;
			color: white;
		}
		.header span{
			float: right;
			font-size: 30px;
			line-height: 30px;	
			cursor: pointer; 	
		}
		.content{
			padding: 15px;
			background: white;
		}
		.content p{
			margin: 15px auto;
		}
		.footer{
			padding: 15px;
			color: white;
			background: coral;
			text-align: center;
		}

		@keyframes move{
			from{opacity:0;}
			to{opacity:1;}
		}

	</style>
</head>
<body>
	<input type="button" value="点击弹窗" id="btn">
	<div class="alert" id="alert">
		<div class="container">
			<div class="header">
				<span class="closebtn">&times;</span>
				<h2>弹窗头部</h2>
			</div>
			<div class="content">
				<h4>弹窗内容</h4>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati adipisci repellendus aliquam porro, quos. Aliquid, deleniti enim dignissimos veniam iusto quia quam suscipit molestiae quis tempore reiciendis, doloremque dolorem obcaecati.
				</p>
			</div>
			<div class="footer">
				<h2>弹窗脚部</h2>
			</div>
		</div>
	</div>
	<script>
		var oBtn=document.getElementById('btn');
		var oAlert=document.getElementById('alert');
		var oClose=document.querySelector('.closebtn');
		oBtn.addEventListener('click',openAlert);
		function openAlert(){
			oAlert.style.display='block';
		}
		oClose.addEventListener('click',closeAlert);
		function closeAlert(){
			oAlert.style.display='none';
		}
		window.addEventListener('click',fadeOut);
		function fadeOut(e){
			if(e.target==oAlert){
				console.log(e.target)
				oAlert.style.display='none'
			}
		}
	</script>
</body>
</html>